<template>
    <!-- 查询过滤 -->
    <el-form
      :model="form"
      ref="form"
      :inline="true"
      size="small"
    >
      <el-form-item
        v-for="(item, index) in searcFromList"
        :key="index"
        :label="item.title+':'"
        :prop="item.field"
        :rules="item.rules"
      >
        <!-- 普通输入 -->
        <el-input
          v-if="item.valueType === 'input'"
          v-model="form[item.field]"
          :placeholder="item.prop ? item.prop.placeholder : '请输入'"
          :style="item.prop ? item.prop.style : {}"
          :value="item.defaultValue || null"
        >
       
        </el-input>
        <!-- 下拉 -->
        <el-select
          v-model="form[item.field]"
          v-if="item.valueType === 'select'"
          :value="item.defaultValue || null"
          :placeholder="item.prop ? item.prop.placeholder : '请输入'"
        >
          <el-option
            v-for="el in item.options"
            :key="el.value"
            :label="el.label"
            :value="el.value"
          >
          </el-option>
        </el-select>
  
        <!-- 时间选择 -->
        <el-date-picker
          v-model="form[item.field]"
          v-if="item.valueType === 'date'"
          type="date"
          value-format="yyyy-MM-dd"
          :placeholder="item.prop ? item.prop.placeholder : '请输入'"
        >
        </el-date-picker>
  
        <!-- 数字 -->
        <el-input-number
          v-model="form[item.field]"
          v-if="item.valueType === 'inputNumber'"
          controls-position="right"
          :min="item.prop ? item.prop.min : 1"
          :max="item.prop ? item.prop.max : 99999"
        ></el-input-number>
      </el-form-item>
  
        
      <!-- 查询 -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
          >{{$t("common.search")}}</el-button
        >
        <el-button icon="el-icon-refresh-right" @click="handleRest"
          >{{$t("common.rest")}}</el-button
        >
      </el-form-item>
    </el-form>
  </template>
  
  
  
  <script>
  export default {
    props: ["options"],
    data() {
      return {
        isShowMore: false, //是否展开
        form: {}, //外部查询参数
      };
    },
    computed: {
      // 表单查询计算
      searcFromList() {
        return this.options.filter((el) => el.search);
      },
    },
    watch: {
      "form.datetimerange"(v) {
        if (v && v.length) {
          this.form.startTime = v[0];
          this.form.endTime = v[0];
        }
      },
    },
    methods: {
      // 查询
      handleSearch() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            console.log(this.form,'xxx')
            this.$emit("handleSearch", this.form);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 重置
      handleRest() {
        for (var _key in this.form) {
          this.form[_key] = null;
        }
        this.handleSearch();
      },
    },
  };
  </script>